<template>
  <div>
    <table>
      <tbody>
        <!-- 使用tr组件, 传入需要的数据 -->
        <!-- table>tr和select>option中不能直接使用组件, 需要在tr和option的is属性中指定组件名 -->
        <tr
          :is="FruitTr"
          v-for="(item, index) in goodsArr"
          :key="index"
          :index="index"
          :count="item.count"
          :fruit="item.goodsName"
          :msg="msg"
          @subcount="changeFFn"
        ></tr>
      </tbody>
      <p>All number {{ total }}</p>
    </table>
  </div>
</template>

<script>
import FruitTr from "./components/FruitTr.vue";
export default {
  components: { FruitTr },
  data() {
    return {
      msg: "卖光啦！！！",
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
    };
  },
  computed: {
    total() {
      return this.goodsArr.reduce((sum, obj) => sum + obj.count, 0);
    },
  },
  methods: {
    changeFFn(num, i) {
      this.goodsArr[i].count = num;
    },
  },
};
</script>

<style></style>
